<template>
    <div class="DJblock" :class="{ noDrag: !Main.dragMouse }">
        <div class="left">
            <el-image :src="url" style="width: 60px; height: 60px"></el-image>
            <div class="name">
                <span>{{ songName }}</span>
            </div>
        </div>
        <div class="right">
            <div class="one">收藏{{ startNumber }}</div>
            <div class="two">声音{{ songNumber}}</div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { getCurrentInstance, ComponentInternalInstance } from 'vue'
import { useMain } from '@/store';
const Main = useMain()
const $el = getCurrentInstance() as ComponentInternalInstance
defineProps<{
    url: string
    songName: string
    startNumber: number
    songNumber: number
}>()
</script>

<style lang='less' scoped>
.DJblock {
    height: 80px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-left: 30px;

        .name {
            width: 400px;
            overflow-x: hidden;
            text-overflow: ellipsis;
            margin-left: 10px;
            height: 80px;
            display: flex;
            align-items: center;
            user-select: none;
        }

        :deep(.el-image) {
            border-radius: .2em;
        }
    }

    .right {
        display: flex;
        align-items: center;
        margin-right: 30px;

        .one {
            margin-right: 170px;
            min-width: 50px;
            width: 100px;
            font-size: 12px;
            color: @small-font-color;
            user-select: none;
        }

        .two {
            margin-right: 50px;
            min-width: 50px;
            font-size: 12px;
            width: auto;
            color: @small-font-color;
            user-select: none;

        }
    }

    &:hover {
        background-color: @line-color-hover !important;
    }
}
</style>